<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="__STATIC__/css/mui.min.css"/>
    <link rel="stylesheet" href="__STATIC__/css/common.css">
    <link rel="stylesheet" href="__STATIC__/css/module.css"/>
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script src="__STATIC__/js/mui.min.js"></script>
</head>

<body>

<!-- 引入通用导航 -->
{include file="Index/nav"}


<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">购物车</h1>
    <a href="#" class="mui-pull-right edit-btn"></a>
</header>
<div class="edit-bot">
    <div class="flex flex-1" style="align-items: center; -webkit-align-items: center; height: 44px;">
        <div class="flex-1 flex">
            <div class="all"><input type="checkbox" checked><span></span>全选</div>
            <span class="heji">合计:￥{$total}</span>
        </div>
        <button class="btn-bot mui-pull-right gopay" onclick="gopay()">去结算</button>
        <a id="care" class="care" href="javascript:">移入关注</a>
        <a id="del" class="del" href="javascript:">删除</a>
    </div>
</div>
<div class="mui-content cart-con">

    {if condition="$list"}

    <h3>开元生鲜</h3>
    <p style="padding: 0 10px;"><span class="color-e40000">*</span>部分商品因为无法精确到整斤，最后金额以实际称重为准，给您带来不便敬请谅解！</p>
    <div class="cartWrap">
        {volist name="list" id="vo"}

            <div class="item posr">
                <div class="check">
                    <input type="checkbox" checked name="cart_id" value="{$vo.cart_id}"/>
                    <span></span>
                </div>
                <div class="con">
                    <div class="table-model width-full">
                        <div class="td-model">
                            <img src="{$vo.goods_pic}" alt="{$vo.goods_name}">
                        </div>
                        <div class="td-model">
                            <h4>{$vo.goods_name}</h4>
                            {if condition="$vo.buy_type eq '1'"}
                            <p>规格：【按个购买】</p>
                            {else}
                            <p>规格：【按斤购买】</p>
                            {/if}
                            <div class="price mui-pull-left">￥{$vo.buy_price}</div>
                            <div class="mui-numbox mart5 mui-pull-right" data-numbox-min='1'>
                                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                <input class="mui-input-numbox" type="number" value="{$vo.buy_num}" />
                                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                            </div>
                            <div class="mui-clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>

        {/volist}
    </div>
    {else}

    <div class="cart-kong">
        <img src="__STATIC__/images/kongcart.png" alt="">
        <p>您的购物车空空如也</p>
        <a href="{:url('index/index/index')}">去逛逛~</a>
    </div>

    {/if}
    <div class="tuijian-list">
        <h4>大家都在看</h4>
        <ul class="mui-clearfix">
            <li>
                <a href="#"><img src="__STATIC__/images/product.jpg" class="img-responsive" alt=""></a>
                <a href="#"><h5>山东莱阳梨 冠县黄金丰水梨 新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果v 2.5kg</h5></a>
                <div class="price mui-pull-left">￥20.00</div>
                <a class="buy mui-pull-right" href="#">加入购物车</a>
                <div class="mui-clearfix"></div>
            </li>
            <li>
                <a href="#"><img src="__STATIC__/images/product.jpg" class="img-responsive" alt=""></a>
                <a href="#"><h5>山东莱阳梨 冠县黄金丰水梨 新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果v 2.5kg</h5></a>
                <div class="price mui-pull-left">￥20.00</div>
                <a class="buy mui-pull-right" href="#">加入购物车</a>
                <div class="mui-clearfix"></div>
            </li>
            <li>
                <a href="#"><img src="__STATIC__/images/product.jpg" class="img-responsive" alt=""></a>
                <a href="#"><h5>山东莱阳梨 冠县黄金丰水梨 新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果v 2.5kg</h5></a>
                <div class="price mui-pull-left">￥20.00</div>
                <a class="buy mui-pull-right" href="#">加入购物车</a>
                <div class="mui-clearfix"></div>
            </li>
            <li>
                <a href="#"><img src="__STATIC__/images/product.jpg" class="img-responsive" alt=""></a>
                <a href="#"><h5>山东莱阳梨 冠县黄金丰水梨 新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果新鲜梨子水果v 2.5kg</h5></a>
                <div class="price mui-pull-left">￥20.00</div>
                <a class="buy mui-pull-right" href="#">加入购物车</a>
                <div class="mui-clearfix"></div>
            </li>
        </ul>
    </div>
</div>
<script>
    document.getElementById("care").addEventListener('tap', function() {
        var btnArray = ['取消', '确认'];
        mui.confirm('确认要将所选商品移入收藏？', '温馨提示', btnArray, function(e) {
            if (e.index == 1) {
                console.log("确认了")
            } else {
                console.log("取消了")
            }
        })
    });
    document.getElementById("del").addEventListener('tap', function() {
        var btnArray = ['取消', '确认'];
        mui.confirm('确认要删除所选商品？', '温馨提示', btnArray, function(e) {
            if (e.index == 1) {
                console.log("确认了")
            } else {
                console.log("取消了")
            }
        })
    });
    $(function () {
        $(".edit-btn").click(function () {
            $(".cartWrap").toggleClass("on");
            $(".tuijian-list").toggleClass("on");
            $(this).toggleClass("on");
            $(".edit-bot").toggleClass("on");
        })
    });


    // 去结算购物车中选中的商品
    function gopay() {

        var btnArray = ['取消', '确认'];
        mui.confirm('确认要去结算所选商品？', '温馨提示', btnArray, function(e) {

            if (e.index == 1) {
                var cart_ids = '';
                $('[name=cart_id]').each(function () {
                    if($(this).is(':checked')) {
                        cart_ids += $(this).val()+',';
                    }
                });




                if(cart_ids.length<=1){
                    alert('请选择要结算的商品'); return false;
                }

//                var url = "'index/goods/confirmOrder',array(cartids=>"+cart_ids+"))";
                var url = "__URL__/confirmOrder/subcart/1/cartids/"+cart_ids;
                window.location.href = url;
            } else {
                console.log("取消了")
            }
        });

    }


</script>
</body>
</html>